<!--
 * @Descripttion: 概况
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @LastEditTime: 2023-08-15 17:57:23
-->
<template>
  <el-row class="lb-survey" v-loading="!isLoad">
    <div class="page-main">
      <div class="class-menu-list flex-warp mt-lg">
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #608dff"
          >
            <i class="iconfont icon-caiwuguanli c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.today_order_cash || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">今日营收</div>
              <lb-tool-tips :padding="0"
                >不含车费，不含退款，所有付款订单累计金额</lb-tool-tips
              >
            </div>
          </div>
        </div>
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #2bcd8e"
          >
            <i class="iconfont icon-dingdanguanli c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.today_order_count || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">今日订单量</div>
              <lb-tool-tips :padding="0"
                >当日0点至24点的订单量，加钟也算一单</lb-tool-tips
              >
            </div>
          </div>
        </div>
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #ffa500"
          >
            <i class="iconfont iconpingbiyonghu c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ base_count.today_user_count || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">今日新增用户</div>
              <lb-tool-tips :padding="0"
                >当日授权了微信头像和昵称了的用户</lb-tool-tips
              >
            </div>
          </div>
        </div>
        <div class="item-child flex-center">
          <!-- <div
            class="item-icon flex-center radius mb-sm"
            style="background: #ff6b73"
          >
            <i class="iconfont iconshujudaping c-base"></i>
          </div>
          <div
            @click="$router.push(`/count`)"
            class="flex-1 ml-lg c-title cursor-pointer"
          >
            <div class="f-title text-bold">数据大屏</div>
            <div class="f-caption mt-sm">更加直观的查看平台数据,便于招商</div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="fill-body space-lg"></div>
    <div class="page-main" style="height: 552px">
      <div class="flex-between pb-lg f-title text-bold c-title b-1px-b">
        <div class="flex-y-baseline">
          平台总销售额
          <lb-tool-tips :padding="1"
            >不含车费，不含退款，所有付款订单累计金额</lb-tool-tips
          >
        </div>
        <div>
          <el-button-group>
            <el-button
              @click="toChangeItem('rankInd', index)"
              :plain="rankInd !== index"
              type="primary"
              v-for="(item, index) in rankList"
              :key="index"
              >{{ item.title }}</el-button
            >
          </el-button-group>
          <el-date-picker
            @change="toChangeItem('start_time', $event)"
            v-model="searchForm.data.start_time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :editable="false"
            :clearable="false"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            style="margin-left: 10px"
            v-if="searchForm.data.day === 5"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="space-lg"></div>
      <div class="data-count-list flex-warp">
        <div class="item-child pt-md">
          <div class="pb-lg c-title text-bold" style="font-size: 15px">
            销售额趋势
          </div>
          <div
            style="width: 100%; height: 400px; background: #fff"
            v-if="isLoad"
          >
            <sales-echarts :datas="tableData.data" />
          </div>
        </div>
        <div class="item-child f-paragraph pt-md">
          <div class="pb-lg c-title text-bold" style="font-size: 15px">
            代理商销售额排名
            <lb-tool-tips :padding="1"
              >不含车费，不含退款，所有付款订单累计金额</lb-tool-tips
            >
          </div>
          <div class="flex-warp" style="margin-top: 20px">
            <div v-if="tableData.agent.length === 0">暂无代理商数据哦</div>
            <div
              :class="[{ 'b-1px-r': tableData.agent.length > 10 }]"
              :style="{
                width: '50%',
                paddingRight: tableData.agent.length > 10 ? '20px' : ''
              }"
            >
              <block v-for="(item, index) in tableData.agent" :key="index">
                <div
                  class="flex-between"
                  :class="[{ 'mt-md': index !== 0 }]"
                  v-if="index < 10"
                >
                  <div class="item-text flex-y-center">
                    <div
                      class="rank-tag flex-center radius mr-md"
                      :style="{
                        color: index < 3 ? '#fff' : '#000',
                        background: index < 3 ? colorType[index] : '#eee'
                      }"
                    >
                      <div class="text">{{ index + 1 }}</div>
                    </div>
                    <div class="ellipsis">
                      {{ item.username }}
                    </div>
                  </div>
                  <div class="c-title">¥{{ item.sale_price }}</div>
                </div>
              </block>
            </div>
            <div class="pl-lg" style="width: 50%; padding-left: 20px">
              <block v-for="(item, index) in tableData.agent" :key="index">
                <div
                  class="flex-between"
                  :class="[{ 'mt-md': index !== 10 }]"
                  v-if="index > 9"
                >
                  <div class="item-text flex-y-center">
                    <div
                      class="rank-tag flex-center radius mr-md"
                      :style="{
                        color: '#000',
                        background: '#eee'
                      }"
                    >
                      <div class="text">{{ index + 1 }}</div>
                    </div>
                    <div class="ellipsis">{{ item.username }}</div>
                  </div>
                  <div class="c-title">{{ item.sale_price }}</div>
                </div>
              </block>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fill-body space-lg"></div>
    <!-- 用户数据 -->
    <div class="page-main" style="height: 552px; overflow: hidden">
      <div class="flex-between pb-lg f-title text-bold c-title b-1px-b">
        <div class="flex-y-baseline">用户数据</div>
        <div>
          <el-date-picker
            @change="getTableDataList('user')"
            v-model="searchForm.user.start_time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :editable="false"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            style="margin-left: 10px"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="space-lg"></div>
      <div class="flex-warp pt-md">
        <div class="f-paragraph" style="width: 40%">
          <div class="item-child flex-center" style="height: auto">
            <div
              class="item-icon flex-center radius mb-sm"
              style="background: #ff6b73"
            >
              <i class="iconfont iconpingbiyonghu c-base"></i>
            </div>
            <div class="flex-1 ml-lg c-title">
              <div class="f-sm-title text-bold">
                {{ tableData.user.total || 0 }}
              </div>
              <div class="flex-y-baseline">
                <div class="f-caption">用户总数</div>
                <lb-tool-tips :padding="0">
                  平台的客户总数，仅统计授权过微信昵称头像或者手机号的用户，访客不统计</lb-tool-tips
                >
              </div>
            </div>
          </div>
          <div
            class="mt-lg pt-lg pb-lg c-title text-bold"
            style="font-size: 15px"
          >
            用户比例
            <lb-tool-tips :padding="0">
              <div>未消费用户：从来没有消费过的客户，但是有授权登录的客户</div>
              <div class="mt-sm">消费一次用户：消费过一次的用户</div>
              <div class="mt-sm">回购客户：消费超过2次（包含2次）的客户</div>
              <div class="mt-sm">流失客户：半年内没有消费的用户</div>
            </lb-tool-tips>
          </div>
          <div
            style="width: 100%; height: 400px; background: #fff"
            v-if="isLoad"
          >
            <order-echarts :datas="tableData.user.balance" />
          </div>
        </div>
        <div style="width: 60%">
          <div class="pb-lg c-title text-bold" style="font-size: 15px">
            新增用户趋势
          </div>
          <div
            style="width: 100%; height: 400px; background: #fff"
            v-if="isLoad"
          >
            <users-echarts :datas="tableData.user.list" />
          </div>
        </div>
      </div>
    </div>
    <div class="fill-body space-lg"></div>
    <!-- 当前开放城市 -->
    <div class="page-main">
      <div class="flex-between pb-lg f-title text-bold c-title b-1px-b">
        <div class="flex-y-baseline">当前开放城市</div>
      </div>
      <div class="space-lg"></div>
      <div id="map-container-box"></div>
      <div class="flex-warp mt-lg pt-md">
        <div class="item-child flex-center">
          <div
            class="item-icon flex-center radius mb-sm"
            style="background: #608dff"
          >
            <i class="iconfont icon-person-accounts c-base"></i>
          </div>
          <div class="flex-1 ml-lg c-title">
            <div class="f-sm-title text-bold">
              {{ city_data.admin_count || 0 }}
            </div>
            <div class="flex-y-baseline">
              <div class="f-caption">代理商总数</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-x-between mt-lg">
        <div style="width: 32%">
          <el-table
            :data="city_data.province_list"
            height="510"
            border
            style="width: 100%"
          >
            <el-table-column property="title" label="已开通省份">
              <template slot-scope="scope">
                {{ `${scope.$index * 1 + 1}、${scope.row.title}` }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 32%">
          <el-table
            :data="city_data.city_list"
            height="510"
            border
            style="width: 100%"
          >
            <el-table-column property="title" label="已开通城市">
              <template slot-scope="scope">
                {{ `${scope.$index * 1 + 1}、${scope.row.title}` }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 32%">
          <el-table
            :data="city_data.area_list"
            height="510"
            border
            style="width: 100%"
          >
            <el-table-column property="title" label="已开通区县">
              <template slot-scope="scope">
                {{ `${scope.$index * 1 + 1}、${scope.row.title}` }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-row>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import salesEcharts from './salesEcharts'
import usersEcharts from './usersEcharts'
import orderEcharts from './orderEcharts'
export default {
  components: {
    salesEcharts,
    usersEcharts,
    orderEcharts
  },
  data () {
    return {
      isLoad: false,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 59 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },
      rankInd: 2,
      rankList: [{ id: 1, title: '今日' }, { id: 2, title: '近7日' }, { id: 3, title: '近30日' }, { id: 4, title: '今年' }, { id: 5, title: '自定义' }],
      colorType: {
        0: '#608dff',
        1: '#2bcd8e',
        2: '#ff6b73'
      },
      map: null,
      isInitMap: false,
      yesterday_count: {},
      city_data: {},
      loading: { data: false, agent: false, user: false },
      searchForm: {
        data: {
          day: 3,
          start_time: '',
          end_time: ''
        },
        agent: {
          day: 3,
          start_time: '',
          end_time: ''
        },
        user: {
          start_time: '',
          end_time: ''
        }
      },
      tableData: {
        data: [],
        agent: [],
        user: {}
      },
      total: {
        data: 0,
        agent: 0,
        user: 0
      }
    }
  },
  created () {
    this.initIndex()
  },
  destroyed () {
    this.destroyMap()
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    async initIndex () {
      let [count] = await Promise.all([this.$api.survey.indexData(), this.getTableDataList('data'), this.getTableDataList('agent')])
      this.base_count = count.data
      this.isLoad = true
      let [city] = await Promise.all([this.$api.survey.cityData(), this.getTableDataList('user')])
      this.city_data = city.data
      this.initMap()
    },
    async getTableDataList (key) {
      this.loading[key] = true
      let searchForm = JSON.parse(JSON.stringify(this.searchForm[key]))
      let { start_time: time } = searchForm
      if (time && time.length > 0) {
        searchForm.start_time = time[0] / 1000
        searchForm.end_time = time[1] / 1000
      } else {
        searchForm.start_time = ''
        searchForm.end_time = ''
      }
      let methodArr = {
        data: 'orderData',
        agent: 'agentOrderData',
        user: 'userData'
      }
      let methodModel = methodArr[key]
      let { code, data } = await this.$api.survey[methodModel](searchForm)
      this.loading[key] = false
      if (code !== 200) return
      if (key === 'user') {
        let textType = {
          orderNoUser: '未消费用户',
          orderOneUser: '消费一次用户',
          orderTwoUser: '回购客户',
          lossUser: '流失客户'
        }
        data.balance.map(item => {
          item.true_title = textType[item.title]
        })
      }
      this.tableData[key] = data
    },
    async toChangeItem (key, val) {
      let { time = [] } = this.searchForm.data
      if (key === 'rankInd') {
        let arr = ['data', 'agent']
        let { id } = this.rankList[val]
        arr.map(item => {
          this.searchForm[item].day = id
          this.searchForm[item].start_time = time
        })
        this[key] = val
        if (val === 4 && this.searchForm.data.start_time.length === 0) return
      } else {
        this.searchForm.agent.start_time = val
      }
      await Promise.all([this.getTableDataList('data'), this.getTableDataList('agent')])
    },
    initMap () {
      let { city_list: cityList } = this.city_data
      if (cityList.length === 0) return
      let center = new TMap.LatLng(39.25565142103588, 109.248046875)
      this.map = new TMap.Map('map-container-box', {
        zoom: 4.4,
        minZoom: 4.4,
        maxZoom: 8,
        center: center,
        mapStyleId: 'style1',
        pitchable: false,
        rotatable: false,
        scrollable: false,
        doubleClickZoom: false,
        renderOptions: {
          enableBloom: true
        },
        baseMap: {
          type: 'vector',
          features: ['base', 'building3d']
        }
      })
      this.isInitMap = true
      let dotArr = []
      cityList.map(item => {
        let { lat, lng, title } = item
        dotArr.push({
          position: new TMap.LatLng(lat, lng),
          styleId: 'small',
          content: title
        })
      })
      var markerLayer = new TMap.MultiMarker({
        map: this.map,
        styles: {
          small: new TMap.MarkerStyle({
            width: 20,
            height: 25,
            anchor: { x: 17, y: 23 },
            src: 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/big.png',
            color: '#333',
            size: 12,
            direction: 'bottom',
            offset: { x: 0, y: 4 },
            strokeColor: '#fff',
            strokeWidth: 1
          })
        },
        enableCollision: false,
        geometries: dotArr
      })
    },
    destroyMap () {
      if (!this.isInitMap) return
      this.map.destroy()
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-survey {
  #map-container-box {
    width: 100%;
    height: 750px;
    margin: 0 auto;
    .rotate-circle {
      display: none;
    }
  }
  .data-count-list {
    height: 420px;
    .item-child {
      height: 420px;
      .item-text {
        width: 70%;
        .rank-tag {
          width: 25px;
          height: 25px;
          .text {
            transform: scale(0.8);
          }
        }
        .ellipsis {
          max-width: calc(100% - 35px);
        }
      }
    }
    .item-child:nth-child(1) {
      width: 60%;
    }
    .item-child:nth-child(2) {
      width: 40%;
    }
  }
  .class-menu-list {
    margin-left: 50px;
    .item-child {
      width: 25%;
    }
  }
  .class-menu-list.city {
    margin-left: 0;
  }
  .item-icon {
    width: 50px;
    height: 50px;
    .iconfont {
      font-size: 25px;
    }
  }
}
</style>
